<script setup>
import {onBeforeMount, reactive, toRefs, ref, onMounted} from "vue"
import {updateNamespaceHandler as updateHandler} from "../../api/namespace.js";
import {ElMessage} from "element-plus";
import {object2List,deleteTableRow,list2Object} from "../../utils/utils.js";

const  data = reactive({
  itemForm:{
  },
  labelList: [],
  annotationsList: [],
})
const props=defineProps({
  itemForm: {
    type: Object
  },
  clusterId: {
    type: String,
  }
})

onMounted(()=>{
  // 把对象转成一个字符串
  const  jsonString = JSON.stringify(props.itemForm)
  // 在把字符串转换成json,最后赋值data.userForm
  data.itemForm = JSON.parse(jsonString)

  data.labelList = object2List(data.itemForm.metadata.labels)  // 把labels 对象转换成key:valued的形式
  console.log("data.itemForm: ",data.itemForm)
  data.annotationsList = object2List(data.itemForm.metadata.annotations)
  console.log("data.itemForm.metadata.annotations：",data.itemForm.metadata.annotations)
  console.log("转换后的对象是：",data.annotationsList)
})

const emits=defineEmits(["rollback"])
const itemFormRef = ref()
let loading = ref(false)

// 实现清空表单的逻辑
const clear =()=>{
  itemFormRef.value.resetFields()
}

// 添加用户的逻辑
const submit =()=>{
  loading.value=true
  console.log("查看加载",loading.value)
  // 把labelList 转成对象
  const labelObj =  list2Object(data.labelList)
  // 赋值给itemForm
  data.itemForm.metadata.labels = labelObj
  // 把annotations 转成对象
  const  annoObj = list2Object(data.annotationsList)
  data.itemForm.metadata.annotations = annoObj
  console.log("更新后的数据", data.itemForm)

  updateHandler(props.clusterId,data.itemForm.metadata.name,data.itemForm).then((response)=>{
    ElMessage({
      type: 'success',
      message: response.data.message,
    })
    loading.value=false
    emits("rollback",props.clusterId)
  })
}

// 添加lable表格事件方法
const addLabelRow = (list)=>{
  const lableRow={
    key: "",
    value: ""
  }
  // 在列表后面添加数据
  // 在列表前面添加数据
  list.unshift(lableRow)
}


const  {itemForm,labelList,annotationsList} = toRefs(data)
</script>

<template>
  <el-form  label-width= "90px" ref="itemFormRef"  :model="itemForm">
    <div>
      <el-tabs >
        <el-tab-pane  label="标签配置">
          <!--   标签配置的表格     -->
          <el-table border :data="labelList" style="width: 100%" height="400px">
            <el-table-column align="center"  prop="key" label="Key" >
              <template #default="scope">
                <el-input v-model="scope.row.key" placeholder="请输入标签的key" />
              </template>
            </el-table-column>
            <el-table-column align="center"  prop="value" label="Value">
              <template #default="scope">
                <el-input v-model="scope.row.value"  placeholder="请输入标签的value" />
              </template>
            </el-table-column>
            <el-table-column align="center"  fixed="right" width="140px"  >
              <template #header>
                <el-button link type="primary" @click="addLabelRow(labelList)">添加</el-button>
              </template>
              <template #default="scope">
                <el-button link type="warning" @click="deleteTableRow(labelList,scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane  label="注释配置">
          <!--   标签配置的表格     -->
          <el-table border :data="annotationsList" style="width: 100%" height="400px">
            <el-table-column align="center"  prop="key" label="Key" >
              <template #default="scope">
                <el-input v-model="scope.row.key" placeholder="请输入注释的key" />
              </template>
            </el-table-column>
            <el-table-column align="center"  prop="value" label="Value">
              <template #default="scope">
                <el-input v-model="scope.row.value"  placeholder="请输入注释的value" />
              </template>
            </el-table-column>
            <el-table-column align="center"  fixed="right" width="140px"  >
              <template #header>
                <el-button link type="primary" @click="addLabelRow(annotationsList)">添加</el-button>
              </template>
              <template #default="scope">
                <el-button link type="warning" @click="deleteTableRow(annotationsList,scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div   class="dialog-footer">
      <el-button type="warning" @click="submit()" >更新</el-button>
    </div>
  </el-form>
</template>

<style scoped>
.form-item{
  width: 400px;
  margin: 0 auto 20px 0;
}
.dialog-footer{
  display: block;
  margin-top: 20px;
}
.class-info {
  display: flex;
  flex-direction: row;
}
</style>